# 一. 通过html ESM 方式导入lingo3D 库
参考资料
【原生JS简单版】30行代码实现动森场景和人物加载｜【开源】Web3D引擎Lingo3D Javascript 3D_哔哩哔哩_bilibili
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BaseScene</title>
</head>
<body>
</body>
<script src="https://unpkg.com/lingo3d-vanilla/dist/main.js"></script>
<script type="module">
const { Cube, Setup, ThirdPersonCamera, OrbitCamera, keyboard, Model } = Lingo;
// 全局变量
var setup,
camera;
function initScene() {
setup = new Setup();
setup.skybox = 'http://xiaomaike.space:6089/lingo3d/fox/env.hdr'; // 天空盒
};
function initMap() {
const map = new Model();
map.src = 'http://xiaomaike.space:6089/lingo3d/fox/Grassland.glb';
map.scale=300;
map.physics = 'map'
};
function initCamera() {
camera = new ThirdPersonCamera(); // 第三人称相机
// camera = new OrbitCamera(); // 透视相机
camera.active = true;
camera.mouseControl = true;
};
function addModelToMap() {
// 添加无人机
const dji = new Model();
window.dji = dji;
dji.src = 'http://xiaomaike.space:6089/3d/models/gltf/dji4.glb';
dji.animation = 'Animation'; // 启动机翼旋转动画
dji.rotationY = 45; // 旋转无人机的机身
// camera.append(dji);
// 定义初始位置
/** 湖 **/
// dji.x = -3937;
// dji.z = 892;
/** 房子 **/
dji.x = -1200;
dji.z = -862;
dji.y = -670;
// 添加狐狸模型
const model = new Model();
model.physics = 'character'; // 物理模式
model.src = 'http://xiaomaike.space:6089/lingo3d/fox/Fox.fbx';
model.animations = {
// idle: 'http://xiaomaike.space:6089/lingo3d/fox/Idle.fbx',
running: 'http://xiaomaike.space:6089/lingo3d/fox/Walking.fbx',
};
model.animation = 'running';
camera.append(model);
// 监听键盘按键事件
keyboard.onKeyPress = (_, keys) => {
if (!model) return;
// console.log(keys);
// stride forward and stride right determine the direction the player is moving towards
// 向前和向右的步伐，用于确定玩家的移动方向
// 拉高
if (keys.has("ArrowUp")) model.y += 100;
else if (keys.has("ArrowDown")) model.y -= 50;
else model.y += 0;
// 向前后走
if (keys.has("w")) model.moveForward(-30); // 前
else if (keys.has("s")) model.moveForward(30); // 后
else model.moveForward(0);
// 左右
if (keys.has("a")) model.moveRight(20);
else if (keys.has("d")) model.moveRight(-20);
else model.moveRight(0);
};
};
// 主程序
function main() {
initScene();
// 初始化地图
initMap();
// 初始化镜头
initCamera();
// 添加模型
addModelToMap();
}
main();
</script>
</html>
# 二.通过vue 工程方式导入lingo3d-vue 库
安装
lingo3d-vue依赖
yarn add lingo-3d
# 2.1. 导入LingoEditor 编辑器
<template>
<World>
<LingoEditor />
</World>
</template>
<script setup lang="ts">
import { World, LingoEditor } from 'lingo3d-vue';
</script>
# 2.2. 创建基础的场景, 加载场景、人物模型
<template>
<World
v-if="resourceLoadProcess >= 100"
defaultLight="http://xiaomaike.space:6089/lingo3d/fox/env.hdr"
skybox="http://xiaomaike.space:6089/lingo3d/fox/env.hdr"
>
<Model
src="http://xiaomaike.space:6089/lingo3d/fox/Grassland.glb"
:scale="300"
physics="map"
@load="handeleAddFoxToMap"
/>
<ThirdPersonCamera
active
mouseControl="drag"
lockTargetRotation="dynamic-lock"
enableDamping
:fov="fov"
>
<Dummy
v-if="foxResource.isShow"
ref="foxRef"
:src="foxResource.src"
:animations="foxResource.animations"
strideMode="free"
strideMove
:metalnessFactor="-5"
physics="character"
/>
</ThirdPersonCamera>
<Model
ref="djiRef"
src="http://xiaomaike.space:6089/3d/models/gltf/dji4.glb"
physics="character"
/>
<Joystick @move="handleJoystickMove" @move-end="handleJoystickMoveEnd" />
</World>
<div v-else>Loading {{ resourceLoadProcess }}% ...</div>
</template>
<script setup lang="ts">
import { reactive, ref, watch, watchEffect } from 'vue';
import { World, Model, ThirdPersonCamera, types, Dummy, Joystick, keyboard, usePreload } from 'lingo3d-vue';
const fov = ref(90);
const djiRef = ref<types.Model>();
// 小狐狸模型的ref
const foxRef = ref<types.Dummy>();
// 小狐狸相关资源链接
const foxResource = reactive({
isShow: false,
src: 'http://xiaomaike.space:6089/lingo3d/fox/Fox.fbx',
animations: {
idle: 'http://xiaomaike.space:6089/lingo3d/fox/Idle.fbx',
running: 'http://xiaomaike.space:6089/lingo3d/fox/Walking.fbx',
}
});
// 预加载资源
const resourceLoadProcess = usePreload(
[
'http://xiaomaike.space:6089/lingo3d/fox/env.hdr',
'http://xiaomaike.space:6089/lingo3d/fox/Grassland.glb',
'http://xiaomaike.space:6089/lingo3d/fox/Fox.fbx',
'http://xiaomaike.space:6089/lingo3d/fox/Idle.fbx',
'http://xiaomaike.space:6089/lingo3d/fox/Walking.fbx',
],
"6.9mb"
);
// watch(
// () => resourceLoadProcess.value,
// (n, o) => {
// console.log('aa', n);
// }
// )
watchEffect((cleanUp) => {
const fox = foxRef.value;
console.log('fox', fox);
if (!fox) return;
const dji = djiRef.value;
if(dji){
const djiRation = () => {
requestAnimationFrame(djiRation);
dji.animations.空物体Action.play();
}
djiRation();
}
window.addEventListener('resize', () => {
fov.value = window.innerWidth > window.innerHeight ? 90 : 120;
});
// 页面卸载
cleanUp(() => {
window.removeEventListener('resize', () => { });
})
});
// 小狐狸移动
const handleJoystickMove = (e: any) => {
const fox = foxRef.value;
if (!fox) return;
fox.strideForward = -e.y * 5;
fox.strideRight = -e.x * 5;
};
const handleJoystickMoveEnd = (e: any) => {
const fox = foxRef.value;
if (!fox) return;
fox.strideForward = 0;
fox.strideRight = 0;
};
// 监听键盘按键事件
keyboard.onKeyPress = (_, keys) => {
const fox = foxRef.value;
if (!fox) return;
// stride forward and stride right determine the direction the player is moving towards
// 向前和向右的步伐，用于确定玩家的移动方向
if (keys.has("w")) fox.strideForward = -5;
else if (keys.has("s")) fox.strideForward = 5;
else fox.strideForward = 0;
if (keys.has("a")) fox.strideRight = 5;
else if (keys.has("d")) fox.strideRight = -5;
else fox.strideRight = 0;
};
keyboard.onKeyDown = (_, keys) => {
const fox = foxRef.value;
if (!fox) return;
if (keys.has("Space")) {
console.log('space', fox);
fox.translateY(500);
}
}
// 把狐狸模型落在地图上
const handeleAddFoxToMap = () => {
setTimeout(() => {
foxResource.isShow = true;
}, 500)
};
</script>
